<template>
    <div>
        <!-- 表格 -->
        <el-table :data="store.getters['menu/getMenulist']" border style="width: 100%"
            :tree-props="{ children: 'children' }" default-expand-all row-key="id">
            <!-- 菜单编号 -->
            <el-table-column prop="id" label="菜单编号" />

            <!-- 菜单名称 -->
            <el-table-column prop="title" label="菜单名称" />

            <!-- 上级菜单 -->
            <el-table-column prop="pid" label="上级菜单" />

            <!-- 菜单图标 -->
            <el-table-column prop="icon" label="菜单图标">
                <template v-slot="{ row }">
                    <el-icon>
                        <component :is="row.icon"></component>
                    </el-icon>
                </template>
            </el-table-column>

            <!-- 菜单地址 -->
            <el-table-column prop="url" label="菜单地址" />

            <!-- 状态 -->
            <el-table-column prop="status" label="状态">
                <template v-slot="{ row }">
                    <el-tag type="success" round size="large" v-if="row.status == 1">正常</el-tag>
                    <el-tag type="warning" round size="large" v-else>禁用</el-tag>
                </template>
            </el-table-column>

            <!-- 操作 -->
            <el-table-column prop="address" label="操作">
                <template v-slot="{ row }">
                    <el-button type="primary" round @click="edit(row.id)">编辑</el-button>
                    <el-button type="danger" round @click="del(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>


<script lang='ts' setup>
//引入子传父事件 ->defineEmits
import { defineEmits } from "vue";
//引入Vuex仓库
import { useStore } from "vuex";
//引入删除提示
import { ElMessage, ElMessageBox } from 'element-plus';
//引入删除接口
import { delMenu } from "../../request/api";


//==================数据====================
//子传父事件
const emits = defineEmits(['edit']);
//使用仓库
const store = useStore();

//==================事件====================
//点击编辑事件
const edit = (e: number) => {
    emits('edit', e);
};
//触发仓库 获取数据方法 如果数组有值  不会再次获取
if (store.getters['menu/getMenulist'].length == 0) {
   store.dispatch('menu/changeMenuAction');
}

//点击删除事件
const del = (id: number) => {
    ElMessageBox.confirm(
        '您确定要删除吗?',
        '删除提示框',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            //删除接口
            let res: any = await delMenu({ id });
            if (res.code == 200) {
                //成功提示
                ElMessage.success(res.msg);
                //重新刷新页面
                store.dispatch('menu/changeMenuAction');
            } else {
                //失败提示
                ElMessage.error(res.msg);
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
        })
}


</script>


<style lang='less' scoped></style>